<!--
@function: 这是一个简单的增删查改表格
@author:HYS
@description:
1 结构：
从SimplePanel上扩展，包括一个标题，工具栏，表格主体。
工具栏上引入了搜索组件grid-search

2 设置：
    name:String 表格名称，显示在panel的标题部分
    columns:Array, 表格列，构建表格必须的属性
        prop:String,字段名称
        label:String,
        width:Number,
        hidden:Boolean,是否显示
    canCreate:Boolean,可见否-新建按钮，默认true
    canDeleteAll:Boolean,可见否-全部删除按钮，默认true
    canEdit:Boolean,可见否-编辑按钮，默认true
    canChoice:Boolean,可见否-选择按钮，默认true
    canDelete:Boolean,可见否-删除按钮，默认true
    candetails:Boolean,可见否-详情按钮，默认true
    canExport:Boolean,可见否-导出按钮，默认true
    canImport:Boolean,可见否-导入按钮，默认false
    canDownTemplate:Boolean，可见否-下载模板，默认false
    action:String, 配合导入 https://jsonplaceholder.typicode.com/posts/"
    showRowNumber:Boolean, 显示行号，默认false
    multiSelection:Boolean, 显示复选框，默认false
    height:[Number,String], 表格主体高度，默认null
    tableData:Array, 表格数据，用来保存表格中显示的内容
    usePagination:Boolean, 是否使用分页，默认true
    pageSize:Number,分页参数,默认20
    inputLabelSearchMode:Boolean, GridSearch参数
    currentPage:Number,分页参数,默认1
    totalNum:Number,总数量，默认0，不是显示在表格中的数量，这个属于查询上来的信息，需要在外层进行绑定输入
    customBtns:Array, 添加在工具栏前面的自定义按钮
3 行为：
增删查改以及导出，都会触发相应事件，在外部可以进行监听。
原有的selection-change事件，我使用了emit进行了冒泡，其他组件上自带的事件，也可以采用相同的方式处理，也可以添加
自定义的参数。

注意：修改和删除，使用表格末尾列的操作，注意外部接收参数

@modify:文宗会
@modify:胡杨升 2018-7-10
修改内容：将新增和导出操作,单独显示在顶部工具中
@modify:胡杨升 2018-9-18
修改内容：添加自定义按钮支持
customBtns:Array，一个配置对象数组
    type:String,类型
    icon:String,图标
    eventName:String,触发的事件名称
    text:String,文字
    
-->
<template>
<simple-panel :panelTitle="name" :hasToolbar="true" :hasFooter="usePagination">
  <template slot="toolbar">
    <div>
      <template v-if="customBtns.length > 0">
        <template v-for="(btnCfg,idx) in customBtns">
          <el-button :key="idx" v-show="!btnCfg.hidden" :type="btnCfg.type" :icon="btnCfg.icon?btnCfg.icon:''" size="mini" style="margin:0 2px;"
           @click="$emit(btnCfg.eventName);">{{btnCfg.text}}</el-button>
        </template>
      </template>
      <el-button v-if="canCreate" type="success" icon="el-icon-plus" size="mini" style="margin:0 2px;" @click="$emit('table-create', {});">新增</el-button>
      <el-button v-if="canDeleteAll" type="danger" icon="el-icon-minus" size="mini" style="margin:0 2px;" @click="$emit('table-DeleteAll', {});">全部删除</el-button>
      <el-button v-if="canExport" type="primary" size="mini" style="margin:0 10px 0 6px;" icon="el-icon-download" @click="$emit('table-export', {});">导出</el-button>
    </div>
    <div>
      <el-upload
        v-if="canImport"
        ref="upload"
        :action="action"
        :auto-upload="true"
        :before-upload="beforeUpload"
        :on-success="uploadSuccess"
        :on-error="uploadError"
        :show-file-list="false" 
        style="margin:0 10px 0 6px;">
        <el-button slot="trigger" size="mini" type="primary" icon="el-icon-upload2" @click="$emit('table-upload', {});">导入</el-button>
      </el-upload>
    </div>
    <div>
      <el-button v-if="canDownTemplate" type="success" size="mini" style="margin:0 10px 0 0px;" icon="el-icon-arrow-down" @click="$emit('table-downTemplate', {});">模板下载</el-button>
    </div>
    <grid-search 
    :tableColumns="columns" 
    :currentPage="currentPage" 
    :pageSize="pageSize" 
    :inputLabelSearchMode="inputLabelSearchMode"
    @searching="onSearching"></grid-search>
  </template>
  <template slot="main">
    <el-table :data="tableData" :height="height" size="medium" class="table"
    @selection-change="$emit('selection-change',$event)"
    @current-change="$emit('current-change', $event)"
    order stripe border :highlight-current-row="!multiSelection">
      <el-table-column v-if="multiSelection" type="selection" width="50" fixed="left"></el-table-column>
      <el-table-column v-if="showRowNumber" label="" type="index" width="50" fixed="left"></el-table-column>
      <template v-for="(col, index) in this.columns">
        <el-table-column :key="index" v-if="!col.hidden" :prop="col.prop" :label="col.label" :width="col.width"
        :align="col.align?col.align:'left'" :header-align="col.headerAlign?col.headerAlign:'left'">
          <template slot-scope="scope">
            <span v-if="col.renderer" v-html="col.renderer(scope,col.prop)">
            </span>
            <span v-else v-text="scope.row[col.prop]">
            </span>
          </template>
        </el-table-column>
      </template>
      <el-table-column v-if="canChoice||canEdit||canDelete||candetails" label="操作" width="100" fixed="right">
        <template slot-scope="scope">
          <el-button v-if="canEdit" type="text" size="small" @click="$emit('table-edit',scope.row, $event);">修改</el-button>
          <el-button v-if="canChoice" type="text" size="small" @click="$emit('table-Choice',scope.row, $event);">选择</el-button>
          <el-button v-if="canDelete" type="text" size="small" @click="$emit('table-delete',scope.row, $event);"><font color="red">删除</font></el-button>
          <el-button v-if="candetails" type="text" size="small" @click="$emit('table-details',scope.row, $event);">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-pagination 
      background
      @current-change="onPageChange"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next, jumper"
      :total="totalNum">
    </el-pagination> -->
  </template>
  <template slot="footer">
    <el-pagination 
      background
      @current-change="onPageChange"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next, jumper"
      :total="totalNum">
    </el-pagination>
  </template>
</simple-panel>
</template>
<script>
import SimplePanel from "./SimplePanel.vue";
import GridSearch from "./GridSearch"

export default {
  name: "table-panel",
  components: {
    "simple-panel": SimplePanel,
    "grid-search": GridSearch
  },
  props: {
    name: { // 表格名称
      type: String,
      default: ""
    },
    canCreate: { // 可见否-新建按钮
      type: Boolean,
      default: false
    },
    canDeleteAll: { // 可见否-全部删除
      type: Boolean,
      default: false
    },
    canEdit: { // 可见否-编辑按钮
      type: Boolean,
      default: false
    },
    canChoice: { // 可见否-编辑按钮
      type: Boolean,
      default: false
    },
    canDelete: { // 可见否-删除按钮
      type: Boolean,
      default: false
    },
    candetails: { // 可见否-详情按钮
      type: Boolean,
      default: false
    },
    canExport: { // 可见否-导出按钮
      type: Boolean,
      default: false
    },
    canImport:{
      type:Boolean,
      default:false
    },
    canDownTemplate:{
      type:Boolean,
      default:false
    },
    action:{
      type:String,
      default:"https://jsonplaceholder.typicode.com/posts/"
    },
    showRowNumber: Boolean, // 显示行号
    multiSelection: Boolean, // 显示复选框
    columns: { // 表格列
      type: Array,
      default: () => {
        return [];
      }
    },
    height: { // 表格主体高度
      type: [Number,String],
      default: () => {
        return null;
      }
    },
    tableData:{// 表格数据
      type:Array,
      default:()=>{
        return [];
      }
    },
    usePagination:{// 是否使用分页
      type:Boolean,
      default:true
    },
    pageSize:{// 分页参数
      type:Number,
      default:20
    },
    inputLabelSearchMode:{
      type:Boolean,
      default:false
    },
    currentPage:{// 分页参数
      type:Number,
      default:1
    },
    totalNum:{// 总数量，不是显示在表格中的数量，这个属于查询上来的信息，需要在外层进行绑定输入
      type:Number,
      default:0
    },
    customBtns:{
      type:Array,
      default:()=>{
        return [];
      }
    }
  },
  methods: {
    onSearching: function(params) { // 搜索-冒泡
      this.$emit("table-searching", params);
      console.log(params);
    },
    handleOperations: function(command) {// 增删改，导出的事件冒泡
      if (command === "create") {
        this.$emit("table-" + command, {});
      } else if (command === "export") {
        this.$emit("table-" + command, {});
      }
    },
    onPageChange:function(page) {// 分页
      // 这里需要反应在查询上，相当于带分页，带条件查询
      console.log(page);
      this.$emit("page-change",page);
    },
    beforeUpload:function(file){
      var me = this;
      let Xls = file.name.split('.');
      if(Xls[1] === 'xls'||Xls[1] === 'xlsx'){
         return file
      }else {
        me.$message.error('上传文件只能是 xls/xlsx 格式!')
         return false
       }
    },
    uploadSuccess:function(){
      this.$message({
        message: "导入成功！",
        type: "success"
      });
    },
    uploadError:function(err){
      this.$message({
        message: "服务器发生错误，代码：" + err.status,
        type: "error"
      });
    }
  },
  data() {
    return {

    };
  }
}
</script>
<style lang="scss">
@import "../../assets/scss/basic.scss";

.simple-table-container {
    margin:0 5px;

    .table{
      width: 100%;
      height:100%;
      overflow: auto;
    }

    .simple-table-header {
        background-color: $--border-level-1;
        text-align: center;
        vertical-align: middle;
        line-height: 40px;
    }

    .simple-table-toolbar {
        background-color: $--border-level-4;
        text-align: center;
        vertical-align: middle;
        line-height: 40px;
    }

    .simple-table-name {
        font-size: 20px;
        color: $--color-primary;
    }

    .simple-table-main {
        background-color: $--border-level-4;
        color: #000;
        text-align: center;
        margin: 0;
        padding: 0;
    }
}


</style>
